<template>
  <div id="electricEchart" style="width: 100%; height: 30vh;"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    dataList: {
      type: Array,
      default: []
    }
  },
  name: 'electricEchart',
  data() {
    return {
      myEchart4: '',
      seriesData: [],
      xData: []
    }
  },
  computed: {},
  watch: {
    dataList: {
      // 自动触发,只能使用handler
      handler(newVal, oldVal) {
        this.getData()
      }
    }
  },
  // mounted() {
  //   this.getData()
  // },
  methods: {
    getData() {
      this.xData = []
      this.seriesData = []
      if (this.dataList) {
        this.dataList.forEach(item => {
          this.xData.push(item.chargeStationName)
          this.seriesData.push(item.sumPower)
        })
      }
      this.openChart()
    },
    openChart() {
      this.$nextTick(function () {
        if (this.myEchart4 != null && this.myEchart4 != '' && this.myEchart4 != undefined) {
          // 销毁
          this.myEchart4.dispose()
        }
        this.myEchart4 = echarts.init(document.getElementById('electricEchart'))

        const option = {
          color: ['#3F95C2'],
          dataZoom: [
            {
              moveOnMouseMove: true,
              type: 'slider',
              show: false,
              yAxisIndex: [0],
              start: 100,
              // end: 30, //初始化滚动条
              minValueSpan: 6
            },
            {
              type: 'inside',
              yAxisIndex: 0,
              zoomOnMouseWheel: false, //滚轮是否触发缩放
              moveOnMouseMove: true, //鼠标滚轮触发滚动
              moveOnMouseWheel: true
            }
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '0%',
            top: '8%',
            containLabel: true
          },
          yAxis: {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#666'
            },
            data: this.xData
          },
          xAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#F1F1F1'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series: [
            {
              type: 'bar',
              barWidth: 15,
              data: this.seriesData
            }
          ]
        }

        this.myEchart4.setOption(option)
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>